<script>
</script>

<template>
  <div class="search-container">
    <!-- 左侧Logo占位 -->
    <div class="logo-placeholder">
      <!-- 预留图片占位 -->
      <img src="dist/upload/image/logo.png" alt="商城Logo"/>
    </div>

    <!-- 右侧搜索区域 -->
    <div class="search-area">
      <!-- 搜索框和按钮 -->
      <div class="search-input-container">
        <input type="text" class="search-input" placeholder="华为手机"/>
        <button class="search-btn">搜索</button>
        <button class="cart-btn">
          <img src="dist/upload/image/car.png" alt="购物车Logo"/>
          我的购物车
        </button>
      </div>

      <!-- 品牌分类列表 -->
      <div class="category-list">
        <span>华为</span>
        <span>|</span>
        <span>小米</span>
        <span>|</span>
        <span>李宁</span>
        <span>|</span>
        <span>杉杉</span>
        <span>|</span>
        <span>鸿星尔克</span>
        <span>|</span>
        <span>美的</span>
        <span>|</span>
        <span>创唯</span>
        <span>|</span>
        <span>格力</span>
        <span>|</span>
        <span>珀菜雅</span>
        <span>|</span>
        <span>落月亮</span>
        <span>|</span>
        <span>推迪</span>
        <span>|</span>
        <span>爱玛</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.search-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 1600px;
  margin: 0 auto;
  padding: 20px 0;
}

.logo-placeholder {
  margin-left: 50px;
  width: 150px; /* Logo宽度 */
  height: 50px; /* Logo高度 */
}

.search-area {
  flex: 1;
  margin-left: 400px; /* 与Logo区域的间距 */
}

.search-input-container {
  display: flex;
  align-items: center;
  margin-bottom: 12.5px; /* 调整为Logo高度的一半 */
  margin-top: 40px;
}

.search-input {
  width: 600px; /* 增加200px */
  height: 40px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
}

.search-btn {
  width: 80px;
  height: 40px;
  background-color: red;
  color: white;
  border: none;
  border-radius: 5px;
  margin-left: 10px;
  cursor: pointer;
}

.cart-btn {
  display: flex;
  align-items: center;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px 10px;
  margin-left: 50px;
  cursor: pointer;

}

.cart-btn img {
  height: 30px;
  margin-right: 5px;
}

.category-list {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #898080;
  margin-top: 50px; /* 修正拼写错误并增加上边距 */
}

.category-list span {
  margin: 0 10px;
}

.category-list span:first-child {
  margin-left: 10px;
}

.category-list span:last-child {
  margin-right: 0;
}
</style>